<template>
  <div class="scrollDiv">
    <scroller>
      <div>
        <div class="loadingBg" v-if="showLoading">
          <div class="loading">
              <img src="../assets/image/loading.gif" />
          </div>
        </div>
        <div v-else>
          <div class="header">
            <div class="personMsg">
              <div class="personMsg_img">
                <img :src="author.avatar" v-if="author.avatar">
                <img src="../assets/image/logo.png" v-else>
                <span :style="'backgroundColor:' + authorColor">{{ professionVo.profession }}</span>
              </div>
              <div class="personMsg_name">
                <div>{{ privacy == 1 ? privacyName : author.name }}</div>
                <p>{{ createtime ? (new Date(createtime)).format('yyyy-MM-dd hh:mm')  : '' }}</p>
              </div>
            </div>
            <div class="questionTitle">{{ questionTitle }}</div>
            <div class="sort">
              <span>{{ questionType }}</span>
              <span>{{ pageAnswer.total ? (pageAnswer.total + '条回答') : '' }}</span>
            </div>
          </div>
          <ul class="answerList">
            <li class="middle" v-for="(item, index) of answerLists" :key="index">
              <div class="middle_img"><img :src="item.avatar" ></div>
              <div class="content">
                <div class="content_title">
                  <div class="title_1">
                    <div>{{ item.name }}</div>
                    <p>{{ item.createtime ? (new Date(item.createtime)).format('yyyy-MM-dd hh:mm')  : '' }}</p>
                  </div>
                </div>
                <div class="suggestion">{{ item.text }}</div>
              </div>
            </li>
          </ul>
          <p class="noMoreData">没有更多数据了</p>
        </div>
        <div style="width: 7.5rem;height: 3rem;"></div>
      </div>
    </scroller>
    <downLoad :hasShare="hasShare"></downLoad>
  </div>
</template>

<script>
  import Vue from 'vue';
  import VueScroller from 'vue-scroller';
  Vue.use(VueScroller)
  import api from '../api'
  import downLoad from './../components/common/download/downLoad.vue'
  import { format	} from './../utils/filter'
  export default {
    name: 'question',
    components: {
      downLoad
    },
    data() {
      return {
        hasShare: '',
        appId: "wx921f8ebbe6ced2c2",
        wxSharePic: "https://static.shengxue985.com/oss/20180830/e5089c21aa9249e0bd121f7a7e21b582.png",
        // token:'eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJhcHAyNjkyNzEiLCJ1c2VySWQiOiIyNjkyNzEiLCJmcm9tIjoiYXBwIiwibmJmIjoxNTU0MjUzMzU5fQ.LXpdpoXMThYS2HCxr_gni883SZsuNI--Roqbme2k83n0_y2_-ipe049DHqF8obFZKY-Om5Qm0QEQwFbFaQcjdu5BQyEU_ThDU6EwQFYcDl9RalYpEI-hDGsQa0QaXlIv75UzZtuUQFD7hTWU27aV2L89Cnf1NsFTM8WF-yGE7G4',
        questionType: '',
        questionTitle: '',
        author: {},
        createtime: '',
        pageAnswer: {},
        answerLists: [],
        authorColor: '',
        professionVo: {},
        showLoading: true,
        privacy: 0, // 是否匿名
        privacyName: '',
      }
    },
    mounted() {
      this.questionDescri()
    },
    created () {
      this.questionId = this.$route.query.questionId
      this.hasShare = this.$route.query.hasShare
      window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.hengshuping, false);
      this.secondShare(true, {
        url: window.location.href,
        appId: this.appId, // 必填，公众号的唯一标识
      });
    },
    methods: {
      //二次分享
      secondShare(hasData, params) {
        api.getSecondShareKey(params).then(res => {
          if (res.data.code == 0) {
            let data = res.data.data;
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature, // 必填，签名，见附录1
              jsApiList: [
                "chooseImage",
                "previewImage",
                "uploadImage",
                "downloadImage",
                "checkJsApi",
                "onMenuShareTimeline",
                "onMenuShareAppMessage",
                "onMenuShareQQ",
                "onMenuShareWeibo"
              ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            this.wxShare(hasData, {
              // title: this.title || "邀您查看提问详情", // 分享标题
              title: "邀您查看提问详情", // 分享标题
              desc: "升学在线,学习超给力", // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: this.wxSharePic, // 分享图标
              type: "", // 分享类型,music、video或link，不填默认为link
              dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
              success: function() {
                // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                // 用户取消分享后执行的回调函数
              }
            });
          } else {
          }
        })
        .catch(err => {
        });
      },
      wxShare(hasData, config) {
        let c;
        if (!hasData) {
          c = {};
          c.title = "邀您查看提问详情";
          c.desc = "升学在线,学习超给力";
          (c.link = window.location.href), (c.imgUrl = this.wxSharePic);
        } else {
          c = config;
        }
        if (location.hash == "#debug") {
          alert(JSON.stringify(c));
        }
        wx.ready(function() {
          wx.onMenuShareAppMessage(c);
          wx.onMenuShareTimeline(c);
          wx.onMenuShareQQ(c);
          wx.onMenuShareWeibo(c);
        });
      },
      questionDescri () {
        const params = {
            id: parseInt(this.questionId),
            pageNo: 1,
            pageSize: 15
        }
        this.showLoading = true;
        api.getQuestionDetail(params).then((res)=> {
          if (res.data.code == 0) {
            this.showLoading = false;
            const data = res.data.data ? res.data.data : {};
            this.questionType = data.questionType;
            this.questionTitle = data.title;
            if (data.privacy == 0) {
              this.author = data.author;
              this.authorColor = data.author.professionVo.color;
              this.professionVo = data.author.professionVo;
            }
            this.createtime = data.createtime;
            this.pageAnswer = data.pageAnswer ? data.pageAnswer : {
              total: 0,
              list: [],
            };
            this.answerLists = data.pageAnswer ? data.pageAnswer.list : [];
            this.privacy = data.privacy;
            this.privacyName = data.privacyName;
          }
              
        }).catch(err=> {
        })
      }
    }
  } 
</script>


<style lang="scss" scoped>
  @import "../styles/mixin.scss";
  .scrollDiv {
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
  }
  .loadingBg{
    background: #fff;
    position: fixed;
    height: 100vh;
    line-height: 100vh;
    width: 100%;
    z-index: 999;
    .loading{
      width: px2rem(200);
      height: px2rem(200);
      display: block;
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 9999;
      margin-left: px2rem(-100);
      margin-top: px2rem(-100);
      background-size: 10% 10%;
      img{
          width: 100%
      }
    }
  }
  .header {
    // padding: 0.3rem;
    padding: px2rem(30);
    
    background-color: #fff;
    .personMsg {
      display: flex;
      justify-content: flex-start;
      padding-bottom: px2rem(20);
      .personMsg_img {
        width: px2rem(90);
        height: px2rem(105);
        position: relative;
        img {
          width: 100%;
          border-radius: 50%;
        }
        span {
          display: inline-block;
          width: px2rem(80);
          height: px2rem(30);
          line-height: px2rem(30);
          font-size: px2rem(20);
          text-align: center;
          color: #fff;
          border-radius: px2rem(15);
          // background-color: #FF6B6D;
          position: absolute;
          bottom: 10%;
          left: 6%;
        }
      }
      .personMsg_name {
        font-size: px2rem(32);
        color: #222;
        margin-left: px2rem(30);
        p {
          color: #BBB; 
          font-size: px2rem(24);
          margin-top: px2rem(10);
        }
      }
    }
    .questionTitle {
      font-size: px2rem(32);
      color: #222;
      margin-bottom: px2rem(30);
      word-break: break-all;
      display: -webkit-box;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .sort {
      display: flex;
      justify-content: space-between;
      font-size: px2rem(20);
      color: #999;
    }
  }
  .answerList {
    padding: 0;
    list-style: none;
    .middle {
      margin-top: px2rem(20);
      display: flex;
      justify-content: space-between;
      background-color: #FFF;
      padding: px2rem(30);
      border-bottom: 1px solid #EEE;
      .middle_img {
        text-align: center;
        img {
          width: px2rem(90);
          border-radius: 50%;
        }
      }
      .content {
        width: 85%;
        .content_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.25rem;
          margin-bottom: px2rem(25);
          .title_1 {
            padding-top: px2rem(10);
            font-size: px2rem(32);
            p {
              font-size: px2rem(20);
              color: #BBB;
              margin-top: px2rem(10);
            }
          } 
          // .title_2 {
          //   width: 1.32rem;
          //   height: 0.48rem;
          //   line-height: 0.48rem;
          //   text-align: center;
          //   font-size: 0.3rem;
          //   div {
          //     border-radius: 0.24rem;
          //   }
          // }
          // .noTouch {
          //   color: #fff;
          //   background-color: #94E05C;
          // }
          // .isTouched {
          //   color: #BBB;
          //   background: #EEEEEE;
          // }
        }
        .suggestion {
          color: #999;
          margin-bottom: px2rem(15);
          font-size: px2rem(28);
          
        }
        // .zan {
        //   display: flex;
        //   justify-content: flex-end;
        //   align-items: center;
        //   margin-right: 0.1rem;
        //   color: #BBB;
        //   img {
        //     width: 0.4rem;
        //     margin-right: 0.2rem;
        //   }
        // }
      }
    }
    // 段落省略
    // li.middle:not(:first-child) .content .suggestion {
    //   word-break: break-all;
    //   display: -webkit-box;
    //   /*! autoprefixer: off */
    //   -webkit-box-orient: vertical;
    //   /* autoprefixer: on */
    //   text-overflow: ellipsis;
    //   -webkit-line-clamp: 3;
    //   overflow: hidden;
    // }
  }
  .noMoreData {
    margin-top: px2rem(15);
    text-align: center;
    font-size: px2rem(20);
    color: #BBB;
    letter-spacing: px2rem(5);
  }
</style>

